<template>
  <div class="bg-white w-full">
    <Table
      class="main-table"
      size="large"
      :scroll="{ x: 'max-content' }"
      :columns="tableColumns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      bordered
      sticky
    >
    </Table>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { Table } from 'ant-design-vue';
import { getTenantLog } from '/@/api/maintenance-center/resource-monitor/for-tenant/resourceMonitor';
import { TableProps } from 'ant-design-vue/lib/vc-table/Table';

const tableColumns = [
  {
    title: '日志组id',
    dataIndex: 'logGroupId',
    width: '200px',
  },
  {
    title: '日志组名',
    dataIndex: 'logGroupName',
    width: '200px',
  },
  {
    title: '日志流id',
    dataIndex: 'logStreamId',
    width: '200px',
  },
  {
    title: '日志流名称',
    dataIndex: 'logStreamName',
    width: '200px',
  },
];

const props = defineProps({ tenantCode: String });

const loading = ref(true);
const dataSource = ref([]);
let current = ref(1);
let size = ref('10');
const total = ref('0');
const pagination = computed(() => ({
  showSizeChanger: true,
  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));

onMounted(() => {
  try {
    getTenantLog({ tenantCode: props.tenantCode }).then((res) => {
      let array = [];
      array.push(res);
      dataSource.value = array;
      total.value = res.length;
    });
  } finally {
    loading.value = false;
  }
});

const handleTableChange: TableProps['onChange'] = (pag) => {
  pagination.value.current = pag.current;
  pagination.value.size = pag.size;
  getTenantLog({
    tenantCode: props.tenantCode,
    current: pagination.value.current,
    size: pagination.value.size,
  }).then((res) => {
    dataSource.value = res;
    total.value = res.length;
    current.value = pag.current;
    size.value = pag.size;
  });
};
</script>

<style lang="less" scoped></style>
